<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-30 10:26:36
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-19 10:16:10
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\dishmana\dishmanagement\details\bominfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<template>
  <div class="detailTable">
    <!-- <pb-table :column="bominfoColumn" :tableData="dishbominfoData" show-summary>
      <template #price></template>
</pb-table> -->
    <el-table :data="dishbominfoData" show-summary :summary-method="getSummaries">
      <el-table-column type="index" label="序号" width="74" />
      <el-table-column prop="ingredientsTypeName" label="配料分组" width="180" />
      <el-table-column prop="spuCommonlyName" label="SPU名称" />
      <el-table-column prop="skuName" label="SKU名称" />
      <el-table-column prop="weight" label="配量(g/份)" :align="'right'" />
      <el-table-column prop="recoveryRate" label="出成率" :align="'right'" />
      <el-table-column prop="price" label="单价(kg/元)" :align="'right'" />
      <el-table-column prop="cost" label="成本(元)" :align="'right'" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { GetBomdishPageListApi } from '@/api/Dashmana'
const props = defineProps({
  Bomdata: {
    type: Object,
    default: {}
  }
})
const getBomlistfn = () => {
  GetBomdishPageListApi({
    "currentPage": 1,
    "pageSize": -1,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "dishId": props.Bomdata.dishId
  }).then((res: any) => {
    dishbominfoData.value = res.data.records
  })
}
const dishbominfoData = ref([
])
const getSummaries = ({ columns, data }: any) => {
  const sums = [] as any;
  columns.forEach((column: any, index: any) => {
    if (index === 0) {
      // 第一列是ID，不显示总计
      sums[index] = '总计';
      return;
    }
    if (column.property === 'weight' || column.property === 'cost') {
      // 只为amount1和amount2计算总计
      const values = data.map(item => Number(item[column.property] || 0));
      const sum = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return parseFloat((prev + curr).toFixed(2));;
        } else {
          return prev;
        }
      }, 0);

      sums[index] = sum;
    } else {
      // 其他列不显示总计
      sums[index] = '';
    }
  });

  return sums;
}
onMounted(() => {
  getBomlistfn()
})
</script>

<style lang="scss" scoped>
.detailTable {
  ::v-deep thead th {
    background: #F5F5F5 !important;
  }
}
</style>
